<template>
	<view class="zyyj">
		<!-- 标题 -->
		<view class="zyyj_title">
			<view class="zyyj_title_add font-6ccbb6 font15" v-if="titleshow" @click="Onadd">初次使用,请添加住院人</view>
			<view v-if="!titleshow" class="title_bos font15 font-7d766b">
				<view class="title_box">
					<view>住院人:<text>李大</text></view>
					<view>住院号:<text>6464646464</text></view>
				</view>
				<view class="title_box">
					<view>科室:<text>神经内科</text></view>
					<view>病区:<text>2病房</text></view>
					<view>床位:<text>1床</text></view>
				</view>
				<view class="title_box_a">
					押金余额:<text class="font-6bcbb6">500</text>
				</view>
			</view>
		</view>
		<!-- 金额 -->
		<view class="payment">
			<view class="flex-row-between">
				<view class="font15 font-7d766b font-b">补缴金额</view>
				<view class="font11 font-7d766b flex-row-center">余额 : <text class="font-6bcbb6 font15 font-b">￥300</text></view>
			</view>
			<view class="payment_bos">
				<view v-for="(item,index) in paymentList" :key="index" :class="item.type==paymentindex?'payment_lista':'payment_listb'"
				 class="payment_list font14">￥{{item.money}}</view>
				<input class="payment_input font14" bindinput="Oninputpayment" placeholder="请输入整百补缴金额" type="number"
				 placeholder-class="placeholderClass" />
			</view>
		</view>
		<!-- 确认支付 -->
		<view class="qx_button">
			<view @click="Oninfo" class="font-323232 font16">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleshow: true, //添加显示
				paymentindex: 1, //下标
				paymentList: [{
						money: '500',
						type: 1
					},
					{
						money: '1000',
						type: 2
					},
					{
						money: '1500',
						type: 3
					},
					{
						money: '2000',
						type: 4
					},
				],
			}
		},
		methods: {
			//支付成功
			Oninfo() {
				uni.navigateTo({
					url: '/pagesA/home/zyyj/info',
				})
			},
			//添加住院人
			Onadd() {
				uni.navigateTo({
					url: '/pagesA/home/zyyj/add',
				})
			}
		}
	}
</script>

<style>
	.zyyj {
		height: 100%;
		background-color: #f9f9f9;
	}

	/* 标题 */
	.zyyj_title {
		height: 200rpx;
		width: 690rpx;
		margin: 30rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 50rpx 0px rgba(213, 213, 213, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zyyj_title_add {
		border: 1rpx #6ccbb6 solid;
		width: 380rpx;
		height: 90rpx;
		border-radius: 10rpx;
		line-height: 90rpx;
		text-align: center;
		color: #6ccbb6;
	}

	.title_bos {
		height: 200rpx;
		width: 690rpx;
		padding: 30rpx 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title_box text {
		margin-left: 12rpx;
	}

	.title_box_a text {
		margin-left: 12rpx;
	}

	/* 金额 */
	.payment {
		width: 750rpx;
		padding: 35rpx 30rpx;
		background-color: #ffffff;
	}

	.payment_bos {
		padding-top: 30rpx;
		position: relative;
	}

	.payment_list {
		display: inline-block;
		width: 210rpx;
		height: 80rpx;
		border-radius: 6rpx;
		line-height: 80rpx;
		text-align: center;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.payment_list:nth-of-type(3) {
		margin-right: 0rpx;
	}

	.payment_lista {
		color: #ffffff;
		background-color: #6ccbb6;
	}

	.payment_listb {
		color: #323232;
		border: 1rpx #eeeeee solid;
	}

	.payment_input {
		border-radius: 6rpx;
		border: 1rpx #eeeeee solid;
		width: 450rpx;
		height: 80rpx;
		position: absolute;
		bottom: 30rpx;
		right: 0rpx;
	}

	.placeholderClass {
		color: #7d766b;
		font-size: 28rpx;
		padding-left: 30rpx;

	}

	/* 提交 */
	.qx_button {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
		z-index: 333;
	}

	.qx_button view {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
		background-color: #6bcbb6;
		color: #fff;
	}
</style>
